import React from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Grid, Typography } from '@material-ui/core';
import { Image } from 'components/atoms';
import { useSelector } from 'react-redux';

const useStyles = makeStyles(theme => ({
    root: {
        width: "100%",
        padding: "50px 0",
        [theme.breakpoints.up('md')]: {
            padding: "0 30px 50px",
        },
    },
    typography: {
        textAlign: "left",
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "24px",
        fontStyle: "normal",
        fontWeight: 700,
        lineHeight: "30px",
        textTransform: "uppercase",
        color: "#000",
        [theme.breakpoints.up('md')]: {
            fontSize: "30px",
        },
    },
    typography1: {
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "56px",
        color: "rgba(255, 255, 255, 0)",
        textStroke: "1px rgba(218, 218, 218, 1)",
        lineHeight: "normal",
        letterSpacing: "-2px",
        [theme.breakpoints.up('md')]: {
            fontSize: "80px",
            textStroke: "1px rgba(23, 23, 23, 1)",
        },
        [theme.breakpoints.up('lg')]: {
            fontSize: "110px",
        },
    },
    typography2: {
        color: "#7E53F9",
        fontSize: "38px",
        lineHeight: "normal",
    },
    typography3: {
        color: "#171717",
        lineHeight: "26px",
        fontSize: "14px",
        textTransform: "none",
    },
    typography4: {
        display: "none",
        [theme.breakpoints.up('md')]: {
            display: "block",
        },
    },
    typography5: {
        display: "block",
        paddingLeft: "10px",
        [theme.breakpoints.up('md')]: {
            display: "none",
        },
    },
    grid: {
        marginTop: "-30px",
        [theme.breakpoints.up('md')]: {
            marginTop: "-50px",
        },
    },
    gridMobile: {
        display: "none",
        [theme.breakpoints.up('md')]: {
            display: "flex",
            marginLeft: "20px"
        },
    },
    context: {
        padding: "50px 30px",
        [theme.breakpoints.up('md')]: {
            padding: " 0",
        },
    }
}));

const Highlight = () => {
    const classes = useStyles();

    const artistsHighlightData = useSelector((state) => state.cover.discovers?.artists);

    const podcastsHighlightData = useSelector((state) => state.cover.discovers?.podcasts);

    return (
        <div className={classes.root}>
            <Typography className={clsx(classes.typography, classes.typography1, classes.typography4)}>
                artist highlight
            </Typography>

            <Typography className={clsx(classes.typography, classes.typography1, classes.typography5)}>
                love music
            </Typography>

            <Grid container justifyContent="space-around" className={classes.grid}>
                <Grid item xs={12} md={5}>
                    <a href={`https://${artistsHighlightData?.link}/`}>
                        <Image
                            src={artistsHighlightData ? artistsHighlightData.image : ""}
                            alt={artistsHighlightData ? artistsHighlightData.image : ""}
                            srcSet={artistsHighlightData ? artistsHighlightData.image : ""}
                            lazyProps={{ width: '100%', height: '100%' }}
                        />
                    </a>
                </Grid>
                <Grid item container justifyContent='center' alignItems="flex-start" direction="column" xs={12} md={5} className={classes.context}>
                    <Typography className={clsx(classes.typography)}>{artistsHighlightData?.title}</Typography>
                    <Typography className={clsx(classes.typography, classes.typography2)}>{artistsHighlightData?.sub_title}</Typography>
                    <Typography className={clsx(classes.typography, classes.typography3)}>{artistsHighlightData?.content}</Typography>
                </Grid>

                <Grid item container xs={1} md={1}>
                </Grid>
            </Grid>

            <Typography className={clsx(classes.typography, classes.typography1, classes.typography4)}>
                podcasts highlight
            </Typography>

            <Grid container justifyContent="space-around" className={clsx(classes.grid, classes.gridMobile)}>
                <Grid item xs={12} md={5}>
                    <a href={`https://${podcastsHighlightData?.link}/`}>
                        <Image
                            src={podcastsHighlightData ? podcastsHighlightData.image : ""}
                            alt={podcastsHighlightData ? podcastsHighlightData.image : ""}
                            srcSet={podcastsHighlightData ? podcastsHighlightData.image : ""}
                            lazyProps={{ width: '100%', height: '100%' }}
                        />
                    </a>
                </Grid>
                <Grid item container justifyContent='center' alignItems="flex-start" direction="column" xs={12} md={5} className={classes.context}>
                    <Typography className={clsx(classes.typography)}>{podcastsHighlightData?.title}</Typography>
                    <Typography className={clsx(classes.typography, classes.typography2)}>{podcastsHighlightData?.sub_title}</Typography>
                    <Typography className={clsx(classes.typography, classes.typography3)}>{podcastsHighlightData?.content}</Typography>
                </Grid>

                <Grid item container xs={1} md={1}>
                </Grid>
            </Grid>
        </div>
    )
}


Highlight.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};


export default Highlight
